$(function(){
    let btns = $(".btn-list li:not(.haha)")
    let loutis = $("#louti #louti_1")
    let top_list = []
    animate = false
    $.each(loutis,function(index,item){
        // console.log(index,item);
        top_list.push($(item).offset().top)
    })
    btns.click(function(){
        // console.log(this);
        // $(this).style.backgroundColor = color();
        $(this).addClass("active").siblings().removeClass("active")
        let index = $(this).index(".btn-list li")
        // console.log(index);
        animate = true
        $("html,body").stop(true).animate({scrollTop : top_list[index]},function(){
            animate = false;
      })
       $(this).fadeOut( 3000 )
    //    $(this).fadeIn( 1000 );
    })
    let $haha = $(".btn-list .haha")
    $haha.click(function(){
        console.log(this);
        $haha.click(function(){
            $("html,body").stop(true).animate({scrollTop : top_list[0]})
          })
         this.style.color= color();
         this.style.fontWeigth = 900
         btns.fadeIn( 3000 );
         
    })
    function color(){
        let num ="#"
        for(let i = 0;i<6;i++){
            num+=parseInt( Math.random()*16).toString(16)
        }
        return num
    }

    $(window).scroll(function(){
        var index = getindex();
        console.log(index);
        change(index);
    })
    function getindex (){
         var scrollTop = $("html,body").scrollTop();
         if(scrollTop>=top_list[top_list.length-1]){
             return top_list.length-1
         }
         for(let i = 0; i<top_list.length;i++){
             if(scrollTop>=top_list[i]&&scrollTop<top_list[i+1]){
                 return i
             }
         }
    }
    function change(index){
        btns.removeClass("active").eq(index).addClass("active")
    }
    
})